<template>
	<view class="content">
		<text class="create-title">选择档案名称</text>
		<picker v-if="loading" mode="selector" :range="options" :range-key="'tcname'" @change="bindChange">
			<view class="uni-input">
				<text>{{options[index].tcname}}</text>
				<image src="/static/images/icon.png" mode="widthFix"></image>
			</view>
		</picker>
		<text class="create-title">选择项目</text>
		<view class="pro-box">
			<view :class="item.isGl?'active pro-item':'pro-item'" v-for="item in typeData" @click="editItem(item)">
				<image :src="'/static/images/item'+item.id+'.png'" mode="widthFix"></image>
				<text>{{item.xmMc}}</text>
			</view>
		</view>
		<button class="startBtn" v-if="isHave" @click="nextBtn">下一步</button>
		<button v-else class="startBtn" @click="startFiles">开始建档</button>
		
		<!-- 弹窗 -->
		<view class="popup" v-if="showModel">
			<view class="popup-box">
				<view class="popup-title">
					选择录入方式
				</view>
				<view class="popup-list">
					<view :class="activeInx==0?'active popup-item':'popup-item'" @click="changeItem(0)">
						设备录入
					</view>
					<view :class="activeInx==1?'active popup-item':'popup-item'" @click="changeItem(1)">
						手动录入
					</view>
				</view>
				<view v-if="activeInx==0 && array.length>0">
					<text class="change-title">选择设备</text>
					<picker v-if="loading" @change="bindPickerChange" :range="array" :range-key="'clientid'">
						<view class="uni-input">
							<text>{{array[arrayinx].clientid || '请选择'}}</text>
							<image src="/static/images/icon.png" mode="widthFix"></image>
						</view>
					</picker>
				</view>
				<button @click="submitBtn">确认</button>
				<text @click="closeBtn" class="close">取消</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				options: [],
				index: 0,
				typeData:[],
				selectId:[],
				activeInx:0,
				showModel:false,
				array: [],
				arrayinx: 0,
				wordId:'',
				queueid:'',
				isHave:false
			}
		},
		onLoad() {
			this.getList()
			this.getXm()
		},
		onShow() {

		},
		methods: {
			changeItem(e){
				this.activeInx = e
			},
			async getXm(){
				let res = await this.http("get","/tc/project/list",{pageNum:1,pageSize:100})
				if(res.code==200){
					res.rows.forEach(item=>{
						item.isGl = false
					})
					this.typeData = res.rows
				}
			},
			editItem(item){
				item.isGl = !item.isGl
				if(item.isGl){
					this.selectId.push(item.id)
				}else{
					this.selectId = this.selectId.filter(itemm => itemm !== item.id);
				}
				console.log(this.selectId)
			},
			async getList() {
				let res = await this.http('get', "/tc/tcOperate/tcnameList", {
					pageNum: 1,
					pageSize: 10
				})
				if (res.code == 200) {
					this.options = res.rows
				}
				let res1 = await this.http('get','/tc/tcOperate/getSfzSBList')
				if(res1.code==200){
					this.array = res1.data
				}
				this.loading = true
			},
			bindChange(e) {
				console.log(e.detail.value)
				this.index = e.detail.value
			},
			async startFiles() {
				let id = this.options[this.index].id
				let res = await this.http("post","/tc/tcOperate/createTcqueue",{
					tcnameid: id,
					pro: this.selectId.join(',')
				})
				if(res.code==200){
					this.wordId = id
					this.queueid = res.data
					this.isHave = true
					this.showModel = true
				}
				this.toast(res.msg)
			},
			nextBtn(){
				this.showModel = true
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.arrayinx = e.detail.value
			},
			closeBtn(){
				this.showModel = false
			},
			submitBtn(){
				if(this.activeInx==0){
					let that = this
					let deviceId = this.array[this.arrayinx].clientid
					let ip = this.array[this.arrayinx].ip || ''
					console.log(ip)
					uni.request({
						url: 'http://'+ip+'/sfzDeviceStart', //仅为示例，并非真实接口地址。
						data: {
							queueid: this.queueid,
							deviceid:deviceId
						},
						method:'post',
						success: (res) => {
							console.log(res.data);
							if(res.data.code==200){
								that.toast(res.data.msg)
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/student/successPage'
									})
								})
							}
						},
						fail: (err) => {
							console.log('请求失败',err)
							that.toast('请打开录入设备')
						}
					});
				}else{
					setTimeout(()=>{
						uni.redirectTo({
							url: '/pages/student/list?id=' + this.wordId+'&queueid='+this.queueid
						})
					},1000)
				}
			}
		}
	}
</script>

<style lang="less">
	.change-title{
		font-size: 28upx;
		display: block;
		margin-bottom: 10upx;
	}
	.popup{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.3);
		z-index: 9;
		.popup-box{
			width: 80%;
			border-radius: 32upx;
			background: linear-gradient(180deg, #CDDAF8 0%, #FFFFFF 23%);
			padding: 20upx 40upx;
			box-sizing: border-box;
			.popup-title{
				width: 100%;
				line-height: 72upx;
				text-align: center;
				background-size: 120upx 72upx;
				padding-top: 10upx;
				font-size: 32upx;
				font-weight: 600;
				color: #1A1A1A;
			}
			.popup-list{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.popup-item{
					width: 48%;
					text-align: center;
					padding: 30upx 0;
					margin: 40upx 0;
					background-color: #EDF1FA;
					border-radius: 30upx;
					font-size: 28upx;
				}
				.active{
					background-color: #76A1F6 !important;
					color: #fff;
				}
			}
			button{
				border-radius: 120upx;
				background: linear-gradient(0deg, #5EA9FA 0%, #7CB6F5 100%);
				color: #fff;
				margin-top: 40upx;
				font-size: 32upx;
				line-height: 92upx;
			}
			.close{
				display: block;
				text-align: center;
				padding: 30upx 0;
			}
		}
	}
	.create-title{
		font-size: 32upx;
		color: #1A1A1A;
		display: block;
		margin-bottom: 20upx;
	}
	.pro-box{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.active{
			background-color: #76A1F6 !important;
			color: #fff;
			image{
				filter: brightness(0%) invert(100%) !important;
				-webkit-filter: brightness(0%) invert(100%) !important;
			}
		}
		.pro-item{
			width: 31%;
			margin: 10upx 1.15%;
			background-color: #EDF1FA;
			text-align: center;
			padding: 20upx 0;
			box-sizing: border-box;
			border-radius: 8upx;
			image{
				width: 40upx;
				height: auto;
				filter: brightness(0%);
				-webkit-filter: brightness(0%);
			}
			text{
				display: block;
				font-size: 28upx;
			}
		}
	}
	.uni-input {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		background-color: #F5F7F9;
		border-radius: 12upx;
		margin-bottom: 20upx;
		padding: 0 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 40upx;
			height: auto;
		}
	}
	.startBtn{
		border-radius: 120upx;
		background: linear-gradient(0deg, #5EA9FA 0%, #7CB6F5 100%);
		color: #fff;
		margin-top: 100upx;
	}
</style>